<!--
 * @Date: 2023-09-19 14:56:35
 * @LastEditTime: 2023-10-12 15:29:36
 * 介绍:
-->
<route lang="json">
{
  "meta": {
    "title": "t('guan-jian-ci-sheng-he')"
  }
}
</route>
<script lang="ts" setup>
import { ApiWkAwaitBanWord } from "@@/api/wk/list";
import { getCountdown } from "@@/utils/tools/date";
import dayjs from "dayjs";
import { useCurrentDate } from "@@/hooks/toolsHooks";
import { add, divide, multiply } from "mathjs";
import { apiBanVote } from "@@/api/wk/index";
import router from "@@/router";
import { fixedDecimals } from "@@/utils/tools/format";

const route = useRoute();
const query: AnyObject = route.query;
const data: ApiWkAwaitBanWord.DataItem = JSON.parse(query.json);
const { currentDate } = useCurrentDate();

const countdown = computed(() => {
  const res = getCountdown(
    currentDate.value,
    dayjs(data.created_at).add(Number(data.end_time_hour), "h")
  );
  if (res.diffTime <= 0) return false;
  return `${res.H}:${res.m}:${res.s}`;
});
function getRatio(ok: number, no: number) {
  const res = multiply(divide(ok, add(ok, no)), 100);
  return Number.isNaN(res) ? 0 : res;
}

const btnLoading = reactive({
  banWordVote: false,
});
enum Vote {
  OK = 1,
  NO = 2,
}

/** 给删除任务投票
 * @param type 1同意，2不同意
 */
async function banWordVote(type: Vote) {
  btnLoading.banWordVote = true;
  const res = await apiBanVote({ id: data.id }, { type });
  btnLoading.banWordVote = false;
  if (res) router.back();
}
</script>
<template>
  <CpageView>
    <div class="auto-MT-md">
      <Ccard class="auto-MT-sm">
        <h3>{{ $t("wei-gui-ci") }}</h3>
        <div class="C-T3">
          {{ dayjs(data.created_at).format("YYYY-MM-DD HH:mm:ss") }}
        </div>
        <div class="flex-A-C B-M1-O2 C-M1 PD-xs PL-sm PR-sm MT-sm R-xs">
          <Cicon name="icon-shijian" />
          <div class="ML-xs">{{ $t("daoJiShi") }}</div>
          <div class="ML-auto">
            {{ countdown || $t("yi-jie-shu") }}
          </div>
        </div>
        <Ccard class="PD-sm">
          <div>{{ data.word }}</div>
        </Ccard>
      </Ccard>
      <Ccard>
        <h3>{{ $t("shen-qing-shuo-ming") }}</h3>
        <div class="MT-sm C-T3">{{ data.explain }}</div>
      </Ccard>
      <Ccard>
        <div class="auto-MT-sm">
          <h3>{{ $t("zhi-chi-shuai") }}</h3>
          <div class="C-T3">
            {{ $t("tou-piao-ren-shu") }}
            {{ add(Number(data.agree_num), Number(data.disagree_num)) }}
          </div>
          <div class="PD-md MT-0">
            <Rslider
              :model-vlaue="
                getRatio(Number(data.agree_num), Number(data.disagree_num))
              "
              readonly
              :min="0"
              :max="100"
              :step="0.01"
              active-color="var(--C-success)"
              inactive-color="var(--C-fail)"
            >
              <template #button="{ value }">
                <CstateTag class="T-nowrap C-white">
                  {{ fixedDecimals(value, 0) }}%
                </CstateTag>
              </template>
            </Rslider>
          </div>
        </div>
      </Ccard>
    </div>
    <template #buttom>
      <div v-if="countdown" class="btnBox flex-J-SB gap-md">
        <Rbutton
          @click="banWordVote(Vote.NO)"
          :loading="btnLoading.banWordVote"
          :size="'large'"
          bg="var(--C-M1-O3)"
          :disabled="data.can_vote === 0"
        >
          <span v-if="data.can_vote === 0">{{ $t("nin-wu-xu-tou-piao") }}</span>
          <span v-else>
            {{ $t("fan-dui") }}
          </span>
        </Rbutton>
        <Rbutton
          @click="banWordVote(Vote.OK)"
          :loading="btnLoading.banWordVote"
          :size="'large'"
          bg="var(--C-M1)"
          :disabled="data.can_vote === 0"
        >
          <span v-if="data.can_vote === 0">{{ $t("nin-wu-xu-tou-piao") }}</span>
          <span v-else>
            {{ $t("zhi-chi") }}
          </span>
        </Rbutton>
      </div>
    </template>
  </CpageView>
</template>
<style lang="scss" scoped></style>
